﻿<Page
    x:Class="LayoutsExample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:LayoutsExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid x:Name="LayoutRoot" 
          Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.Resources>
            <local:ShapeConverter x:Key="ShapeConverter"/>
            <local:ViewModel x:Key="ViewModel"/>
            <DataTemplate x:Key="ShapeTemplate">
                <ContentControl 
                    HorizontalContentAlignment="Center"
                    VerticalContentAlignment="Center"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Margin="5"
                    Content="{Binding Converter={StaticResource ShapeConverter}}"/>
            </DataTemplate>
            <DataTemplate x:Key="HeaderTemplate">
                <TextBlock 
                                Text="{Binding Key}" 
                                Margin="5" 
                                Style="{StaticResource SubtitleTextBlockStyle}"></TextBlock>
            </DataTemplate>
            <CollectionViewSource x:Name="ShapesGrouped"
                                    Source="{Binding Source={StaticResource ViewModel}, Path=ShapesGrouped}"
                                    IsSourceGrouped="True"/>
            <CollectionViewSource x:Name="ShapesNotGrouped"
                                    Source="{Binding Source={StaticResource ViewModel}, Path=ShapesNotGrouped}"
                                    IsSourceGrouped="False"/>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal">
            <ComboBox Width="200" 
                        HorizontalAlignment="Left" 
                        Margin="5"
                        ItemsSource="{Binding Source={StaticResource ViewModel}, Path=States}"
                        SelectedItem="{Binding Source={StaticResource ViewModel}, Path=CurrentState, Mode=TwoWay}"></ComboBox>
            <ComboBox Width="200" 
                      HorizontalAlignment="Left" 
                      Margin="5"
                      ItemsSource="{Binding Source={StaticResource ViewModel}, Path=Stretch}"
                      SelectedItem="{Binding Source={StaticResource ViewModel}, Path=CurrentStretch, Mode=TwoWay}"></ComboBox>
        </StackPanel>
        <Viewbox Grid.Row="1" x:Name="ViewBoxInstance" Stretch="None">
            <Grid HorizontalAlignment="Center" VerticalAlignment="Center"
                  Width="2048" Height="1080">
                <ListBox x:Name="ViewListBox"
                    Visibility="Visible"
                    ItemsSource="{Binding Source={StaticResource ShapesNotGrouped}}"
                    ItemTemplate="{StaticResource ShapeTemplate}">
                </ListBox>
                <ItemsControl x:Name="ViewItemsControl" 
                      Visibility="Collapsed"
                      ItemsSource="{Binding Source={StaticResource ShapesNotGrouped}}"
                      ItemTemplate="{StaticResource ShapeTemplate}"/>
                <GridView x:Name="ViewGridView"
                  Visibility="Collapsed"
                  IsSwipeEnabled="True"
                  ItemsSource="{Binding Source={StaticResource ShapesGrouped}}"
                  ItemTemplate="{StaticResource ShapeTemplate}">
                    <GridView.GroupStyle>
                        <GroupStyle HeaderTemplate="{StaticResource HeaderTemplate}">
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <VariableSizedWrapGrid Orientation="Vertical"></VariableSizedWrapGrid>
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </GridView.GroupStyle>
                </GridView>
                <ListView x:Name="ViewListView"
                  Visibility="Collapsed"
                  IsSwipeEnabled="True"
                  ItemsSource="{Binding Source={StaticResource ShapesGrouped}}"
                  ItemTemplate="{StaticResource ShapeTemplate}">
                    <ListView.GroupStyle>
                        <GroupStyle HeaderTemplate="{StaticResource HeaderTemplate}"/>
                    </ListView.GroupStyle>
                </ListView>
                <FlipView x:Name="ViewFlipView"
                  VerticalAlignment="Center"
                  Visibility="Collapsed"
                  Margin="10 100 700 300"                          
                  Background="DarkGray"
                  ItemsSource="{Binding Source={StaticResource ShapesNotGrouped}}"
                  ItemTemplate="{StaticResource ShapeTemplate}">
                </FlipView>
            </Grid>
        </Viewbox>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="LayoutStates">
                <VisualState x:Name="ViewListBoxState"/>
                <VisualState x:Name="ViewItemsControlState">
                    <Storyboard Duration="0:0:0">
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ViewListBox" 
                                                       Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ViewItemsControl" 
                                                       Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="ViewGridViewState">
                    <Storyboard Duration="0:0:0">
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ViewListBox" 
                                                       Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ViewGridView" 
                                                       Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="ViewListViewState">
                    <Storyboard Duration="0:0:0">
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ViewListBox" 
                                                       Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ViewListView" 
                                                       Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="ViewFlipViewState">
                    <Storyboard Duration="0:0:0">
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ViewListBox" 
                                                       Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ViewFlipView" 
                                                       Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>
